<template>
  <div>
    <el-container class="userpage">
      <el-header>
        <el-header
          style="text-align: left; background-color:#223458;opacity: 0.95;color: aliceblue; font-size: 5px; display: flex;align-items:center; height:100px;">
          <el-col :span="3">
            <el-avatar class="item" :size="90" :src=user.avatar style="margin-right: 30px;">
            </el-avatar>
          </el-col>
          <el-col>
            <el-descriptions :column="1">
              <el-descriptions-item label="用户名">
                {{ user.user_name }}&emsp;&emsp;<i :class="'el-icon-' + user.user_sex"></i>
              </el-descriptions-item>
              <el-descriptions-item label="账号类型">
                <el-tag size="small" style="color: rgba(209, 215, 221, 0.8); background-color: rgba(0, 151, 215, 0.8);">{{
                  user.user_role == 1 ? '管理员账号' : '普通账号' }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>

          <el-dropdown class="item" @command="logOut">
            <span class="item" style="font-size: 25px;color: white;">
              <i class="el-icon-setting " style="margin-right: 30px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="font-size: 10px" command="a">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-menu mode="horizontal" router solid :default-active="this.$route.path" background-color="#223458" text-color="#d3d6dd"
          active-text-color="#6290c8 ">
          <el-menu-item index="/personal/mySpace">
            <template slot="title">
              <i class="el-icon-postcard"></i>个人主页
            </template>
          </el-menu-item>

          <el-menu-item index="/personal/changeInfo">
            <template slot="title">
              <i class="el-icon-s-operation"></i>账号管理
            </template>
          </el-menu-item>
          <el-menu-item index="/personal/showBlog">
            <template slot="title">
              <i class="el-icon-postcard"></i>全部游记
            </template>
          </el-menu-item>
          <el-menu-item index="/personal/writeBlog">
            <template slot="title">
              <i class="el-icon-edit"></i>游记书写
            </template>
          </el-menu-item>
          <el-submenu index="/personal/collection">
            <template slot="title">
              <i class="el-icon-star-on"></i>收藏</template>
            <el-menu-item-group>
              <el-menu-item index="/personal/collection/blogCollection">
                <span style="font-size:20px">游记收藏</span>
              </el-menu-item>
              <el-menu-item index="/personal/collection/scenicCollection">
                <span style="font-size:20px">景点收藏</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import personalApi from "@/api/personal"

export default {
  data() {
    return {
      user: {
      },
    }
  },
  methods: {
    loadUserInfo() {
      personalApi.getInfo().then(res => {
        this.user=res.data;
      })
    },
    logOut(command) {
      window.localStorage.clear();
      this.$router.push("/login");
    }
  },
  mounted() {
    this.loadUserInfo();
  }
}
</script>

<style lang="scss" scoped>
.userpage {
  margin-top: 1%;
  margin-left: 15%;
  margin-right: 15%;
}

::v-deep .el-menu {
  height: 100%;
  border-color: #004e89;

  .el-menu-item {
    font-size: 20px;
  }
}

::v-deep .el-menu--horizontal {
  border-bottom: none !important;
  .el-submenu .el-submenu__title {
    font-size: 20px;
  }
}

::v-deep .el-descriptions {
  font-size: 20px;
}

.el-main {
  margin-top: 8%;
}
</style>
 